<template>
  <div>
    <h2>消息管理</h2>
    <el-table :data="messages" style="width: 100%">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="date" label="时间" width="180" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button size="mini" type="danger" @click="deleteMessage(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const messages = ref([
  { title: '系统通知', content: '欢迎使用选题管理系统！', date: '2024-06-17 10:00' },
  { title: '管理员公告', content: '本周五系统维护。', date: '2024-06-16 15:30' }
])

function deleteMessage(index) {
  messages.value.splice(index, 1)
  ElMessage.success('消息已删除')
}
</script>